<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>聊天室</title>
  <style>

    #message {
      margin-top: 20px;
      border: 1px solid gray;
      padding: 20px;
    }
  </style>

</head>
<body>

昵称：<input type="text" id="nickname"/>
<button onclick="conectWebSocket()">连接WebSocket</button>
<button onclick="closeWebSocket()">断开连接</button>

<br/>
消息：<input id="text" type="text"/>
频道号<input id="toUser" type="text"/>
<button onclick="send()">发送消息</button>

<!-- 存放接收到的消息. -->
<div id="message">

</div>


<script type="text/javascript">

  //连接对象.
  var websocket = null;
  var nickname = null;

  function conectWebSocket() {
    nickname = document.getElementById("nickname").value;
    if (nickname == '') {
      alert("请输入昵称");
      return;
    }
    //判断当前的浏览器是否支持websocket.
    if ("WebSocket" in window) {
      websocket = new WebSocket("ws://localhost:8080/websocket/" + nickname);
    } else {
      alert("Not support websocket");
      return false;
    }

    //连接成功的方法.
    websocket.onopen = function (event) {
      setMessgeHtml("Loc MSG:连接成功");
    }

    //连接关闭.
    websocket.onclose = function (event) {
      setMessgeHtml("Loc MSG:连接关闭");
    }

    //连接异常.
    websocket.onerror = function (event) {
      setMessgeHtml("Loc MSG:连接异常");
    }


    websocket.onmessage = function (event) {
      setMessgeHtml(event.data);
    }

  }


  function setMessgeHtml(msg) {
    var message = document.getElementById("message");
    message.innerHTML += msg + "<br/>";
  }

  /**
   发送消息.
   */
  function send() {
    var message = document.getElementById("text").value;
    var toUser = document.getElementById("toUser").value;
    var socketMsg = {msg: message, toUser: toUser};
    if (toUser == '') {
      socketMsg.type = 0;//群聊.
    } else {
      socketMsg.type = 1;//单聊.
    }

    //websocket.send(nickname+":"+message);
    websocket.send(JSON.stringify(socketMsg));//将json对象转换为json字符串.
  }


</script>


</body>
</html>